<template>
	<view class="min-vh-70">
		<view class="x-navbar x-navbar-sticky x-navbar-body"
			:style="[`--bg-opacity:${opacity.navbar}`, `padding-top:${PLATFORM.statusBarHeight}px`]">
			<view class="x-navbar-tools grid-gap-2">
				<!-- <text class="font-weight-500 h8 text-ellipsis-1" style="max-width:calc(100% - 15px)">贵阳市</text> -->
				<x-city class="font-weight-500 h8 text-ellipsis-1" style="max-width:calc(100% - 15px)" />
				<image src="/static/icons/arrow-down.png" mode="aspectFit" class="x-navbar-icons-image"
					style="width: 7px; height: 6px;" />
			</view>
			<view class="x-navbar-content">
				<text
					class="text-primary h6 font-weight-700 text-ellipsis-1 x-navbar-title">商户</text>
			</view>
			<view class="x-navbar-icons"></view>
			<!-- #ifndef MP-WEIXIN -->
			<view class="x-search-icons">
				<image src="/static/icons/notice.png" mode="aspectFit" class="x-search-icons-image"
					style="width: 22px; height: 24px;" />
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="x-navbar-icons"></view>
			<!-- #endif -->
		</view>
		<view class="x-search"
			:style="[`--bg-opacity:${opacity.navbar}`, `--xl-status-bar-height:${PLATFORM.statusBarHeight}px`]">
			<view class="x-search-input">
				<image src="/static/icons/search.png" mode="aspectFit" style="width: 16px; height: 16px;" />
				<input type="text" class="x-search-input__content" placeholder="搜索" placeholder-class="text-placeholder"
					confirm-type="search" v-model="search.keywords" @input="searchGetList" />
				<text class="x-search-input__btn" @tap="searchGetList">搜索</text>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="x-search-icons">
				<image src="/static/icons/notice.png" mode="aspectFit" class="x-search-icons-image"
					style="width: 22px; height: 24px;" />
			</view>
			<view class="x-mp-weixin-capsule"></view>
			<!-- #endif -->
		</view>
		<view class="p-4 flex flex-column grid-gap-4">
			<view class="bg-white rounded-4 p-4" v-for="(item, index) in list" :key="index">
				<x-shop-item :item="item" />
			</view>
			<x-more :status="loading" @load="getList"></x-more>
		</view>
		<x-tabbar @reload="handleReload"></x-tabbar>
		<x-one-click-alarm ref="XOneClickAlarmRef"/>
	</view>
</template>

<script setup lang="ts">
import { ref, watch,watchEffect } from 'vue';
import { $func, $api,$helper,$page } from '@/utils';
import { $EventName } from '@/utils/const/env';
import { onPageScroll, onLoad, onUnload, onReachBottom,onShow,onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
import { usePlatformStore, useWebConfigStore, useStatusStore, useRefs } from "@/stores";
const PlatformStore = usePlatformStore();
const { PLATFORM } = useRefs(PlatformStore);
const WebConfigStore = useWebConfigStore();
const { WEBCONFIG } = useRefs(WebConfigStore);
const StatusStore = useStatusStore();
const { GLOBALSTATUS } = useRefs(StatusStore);
const opacity = ref<{
	navbar: number | string
	search: number | string
}>({
	navbar: 0,
	search: 0,
});
const top = ref(0);
watch(() => top.value, (val: number) => {
	if (val < -10) {
		return;
	}
	opacity.value.navbar = val > 50 ? 1 : (val / 50).toFixed(1);
	opacity.value.search = val > (50 + PLATFORM.value.statusBarHeight) ? 1 : (val / (50 + PLATFORM.value.statusBarHeight)).toFixed(1);
	if(val<10){
		list.value=list.value.sort((a:any,b:any)=>a.sort-b.sort);
	}
})
const search = ref({
	page: 1,
	limit: 10,
	keywords: ''
})
watchEffect(() => {
	if(GLOBALSTATUS.value?.location){
		search.value.lat=GLOBALSTATUS.value.location.lat;
		search.value.lng=GLOBALSTATUS.value.location.lng;
	}
})
const loading = ref<LoadingType>('loadmore');
const list = ref<any[]>([]);
const getList = () => {
	if (loading.value === 'loading' || loading.value === 'nomore') return;
	loading.value = 'loading';
	$api.Shop.list(search.value).then((data: any) => {
		loading.value = 'loadmore';
		const d=data.data.sort((a:any,b:any)=>a.sort-b.sort);
		list.value = [...list.value, ...d];
		search.value.page++;
		if (data.current_page >= data.last_page) {
			loading.value = 'nomore';
		}
	}).finally(() => {
		if (loading.value === 'loading') {
			loading.value = 'loadmore';
		}
	});
}
const debounceGetList = $func.debounce(getList, 300);
const searchGetList = () => {
	loading.value = 'loadmore';
	search.value.page = 1;
	list.value = [];
	debounceGetList();
}
onPageScroll(({ scrollTop }: { scrollTop: number }) => {
	top.value = scrollTop;
})
const handleReload = () => {
	searchGetList();
	console.log('reload');
}
onReachBottom(() => {
	getList();
})
onLoad(() => {
	searchGetList();
	uni.$on($EventName.X_CITY_CHANGE, searchGetList);
})
onUnload(() => {
	uni.$off($EventName.X_CITY_CHANGE, searchGetList);
})
const XOneClickAlarmRef = ref<any>();
onShow(()=>{
	XOneClickAlarmRef.value?.getList();
	// #ifdef H5
	$helper.replaceUrlParam('appid', $helper.appid());
	// #endif
}) 
onShareAppMessage(()=>{
	return $page.shareMessage({
		title: '商户',
		path: `/pages/mch/index`
	})
})
onShareTimeline(()=>{
	return $page.shareTimeline({
		title: '商户',
		path: `/pages/mch/index`
	})
})
</script>

<style lang="scss">
/* #ifdef H5 */
uni-page[data-page="pages/mch/index"] {

    /* #endif */
    page {
        background: radial-gradient(circle at 15% 20%, var(--xl-primary) -100%, transparent 35%),
            radial-gradient(circle at 27% 5%, var(--xl-primary-light-3) -50%, transparent 30%),
            radial-gradient(circle at 85% 17%, var(--xl-primary-light-1) -50%, transparent 25%);
        background-repeat: no-repeat;
        background-position: top center;
        background-color: $uni-bg-color-grey;
        /* #ifdef H5 */
        background-attachment: fixed;
        /* #endif */
    }

    /* #ifdef H5 */
}
/* #endif */
</style>